<template>
  <view class="item">
    <view @click="choosed = !choosed" v-show="isEditing">
      <view class="btn">
        <image
          src="../../../static/img/cart/unchoosed.svg"
          alt=""
          class="choosed image"
          v-show="!choosed"
        />
        <image
          src="../../../static/img/cart/choosed.svg"
          alt=""
          class="choosed image"
          v-show="choosed"
        />
      </view>
    </view>
    <view class="left">
      <image 		  class="image" :src="goodObj.good.cover" alt="" @click="check" />
    </view>
    <view class="right">
      <view class="title">{{ showTitle }}</view>
      <view class="bottom">
        <view class="price">¥{{ goodObj.good.price }}</view>
        <view v-show="!isEditing" class="cart" @click="addGood(goodObj)">
          <image class="image" v-show="goodInCart" src="../../../static/img/item/CartActive.svg" alt="" />
          <image class="image" v-show="!goodInCart" src="../../../static/img/item/addCart.svg" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  components: {},
  props: {
    goodId: {
      type: String,
      default() {
        return "";
      },
    },
    goodObj: {
      type: Object,
      default() {
        return {};
      },
    },
    isEditing: {
      type: Boolean,
      default() {
        return false;
      },
    },
    chooseGood: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      choosed: this.chooseGood,
    };
  },
  computed: {
    ...mapGetters(["goodIfInCart"]),
    showTitle() {
      let title = this.goodObj.good.title;
      return title.length < 30 ? title : title.slice(0, 30) + "...";
    },
    goodInCart() {
      return this.goodIfInCart({
        shopId: this.goodObj.good.belonging,
        goodId: this.goodId,
      });
    },
  },
  methods: {
    ...mapMutations(["addShop"]),
    check() {
      // this.$router.push({ path: "/detail", query: { id: this.goodId } });
	  uni.navigateTo({
	  	url:`/pages/detail/Detai?id=${this.goodId}`
	  })
    },
    addGood(goodObj) {
      this.addShop(goodObj);
      this.success("加入购物车成功");
    },
  },
  watch: {
    choosed(newV) {
      this.$emit(newV ? "choosed" : "unchoosed", this.goodId);
    },
    chooseGood() {
      this.choosed = this.chooseGood;
    },
    isEditing(newV) {
      !newV && (this.choosed = false);
    },
  },
};
</script>
<style lang="scss" scoped>
.item {
  display: flex;
  padding: 20rpx 0;
  font-size: 4vw;
}
.left {
  display: flex;
  align-items: center;
  margin: 0 10px;
}
.left > .image {
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 30rpx;
}

.title {
  height: 35px;
  font-size: 4vw;
}

.bottom {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: red;
}

.cart > .image {
  width: 64rpx;
  height: 64rpx;
}
.choosed {
  height: 42rpx;
  width: 42rpx;
}

.btn {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2vw 0 4vw;
}
</style>